<template>  
    <div class="library-management">  
      <h2>图书管理</h2>  
    
      <div class="book-list">  
        <h3>图书列表</h3>  
        <table>  
          <thead>  
            <tr>  
              <th>ID</th>  
              <th>标题</th>  
              <th>作者</th>  
              <th>操作</th>  
            </tr>  
          </thead>  
          <tbody>  
            <tr v-for="(book, index) in books" :key="book.id">  
              <td>{{ book.id }}</td>  
              <td>{{ book.title }}</td>  
              <td>{{ book.author }}</td>  
              <td>  
                <button @click="editBook(book)">编辑</button>  
                <button @click="deleteBook(book.id)">删除</button>  
              </td>  
            </tr>  
          </tbody>  
        </table>  
      </div>  
     
      <div class="book-form">  
        <h3 v-if="isEditing">编辑图书</h3>  
        <h3 v-else>添加新图书</h3>  
        <form @submit.prevent="saveBook">  
          <div>  
            <label for="title">标题:</label>  
            <input type="text" v-model="currentBook.title" required />  
          </div>  
          <div>  
            <label for="author">作者:</label>  
            <input type="text" v-model="currentBook.author" required />  
          </div>  
          <button type="submit">保存</button>  
          <button type="button" @click="cancelEdit">取消</button>  
        </form>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        books: [   
           { id: 1, title: 'Vue 3 实战', author: '张三' },  
           { id: 2, title: 'JavaScript 高级编程', author: '李四' }  
        ],  
        currentBook: {  
          id: null,  
          title: '',  
          author: ''  
        },  
        isEditing: false,  
        editedBookIndex: null  
      };  
    },  
    methods: {  
      editBook(book) {  
        this.isEditing = true;  
        this.currentBook = { ...book };  
        this.editedBookIndex = this.books.indexOf(book);  
      },  
      deleteBook(id) {  
        this.books = this.books.filter(book => book.id !== id);  
        if (this.isEditing && this.currentBook.id === id) {  
          this.cancelEdit();  
        }  
      },  
      saveBook() {  
        if (this.isEditing) {   
          this.$set(this.books, this.editedBookIndex, { ...this.currentBook });  
        } else {  
          this.currentBook.id = this.books.length + 1;  
          this.books.push({ ...this.currentBook });  
        }  
        this.cancelEdit();  
      },  
      cancelEdit() {  
        this.isEditing = false;  
        this.currentBook = { id: null, title: '', author: '' };  
        this.editedBookIndex = null;  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  .library-management {  
    max-width: 800px;  
    margin: 0 auto;  
    padding: 20px;  
    border: 1px solid #ccc;  
    border-radius: 8px;  
  }  
    
  .book-list, .book-form {  
    margin-bottom: 20px;  
  }  
    
  h3 {  
    margin-top: 0;  
  }  
    
  table {  
    width: 100%;  
    border-collapse: collapse;  
  }  
    
  th, td {  
    padding: 10px;  
    text-align: left;  
    border-bottom: 1px solid #ddd;  
  }  
    
  button {  
    margin-right: 5px;  
    padding: 5px 10px;  
    cursor: pointer;  
    background-color: #42b983;  
    color: white;  
    border: none;  
    border-radius: 4px;  
  }  
    
  button:hover {  
    background-color: #36976f;  
  }  
    
  form div {  
    margin-bottom: 15px;  
  }  
    
  label {  
    display: inline-block;  
    width: 120px;  
  }  
    
  input {  
    width: calc(100% - 130px);  
    padding: 8px;  
    box-sizing: border-box;  
  }  
  </style>